<script setup lang='tsx' name='Group'>
import type { FriendShipInfo, Pagination } from '@/types/views/friend'
import { chatroomListApi } from '@/api'
import type { FormInstance, TableInstance } from 'element-plus';
import type { ChatRoomInfo } from '@/types/views/group';

function useGroupListFunc() {
    const formRef = ref<FormInstance>()
    const form = reactive<Pagination & { name: string }>({
        page: 1,
        pageSize: 10,
        name: ''
    })
    const tableRef = ref<TableInstance>()
    const total = ref(0)
    const table = ref<ChatRoomInfo[]>([])

    let timer: number | null = null
    const loading = ref(false)

    function geGroupList() {
        if (timer) clearTimeout(timer)
        loading.value = true
        timer = setTimeout(async () => {
            const { data } = await chatroomListApi(form)
            table.value = data.rows
            total.value = data.total
            loading.value = false
            clearTimeout(timer as number)
        }, 200) as unknown as number

    }
    function reset() {
        formRef.value?.resetFields()
        geGroupList()
    }

    return { formRef, form, tableRef, total, table, loading, geGroupList, reset }
}
const { formRef, form, tableRef, total, table, loading, geGroupList, reset } = useGroupListFunc()
geGroupList()
onActivated(() => geGroupList())
</script>

<template>
    <div class='group-container'>
        <el-row :gutter="10">
            <el-col :span="16">
                <el-form ref="formRef" :model="form" label-width="auto">
                    <el-row :gutter="10">
                        <el-col :span="6">
                            <el-form-item label="昵称" prop="nickName">
                                <el-input clearable v-model="form.name" placeholder="输入群名称" size="default"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="1.5">
                            <el-button type="primary" @click="geGroupList">查询</el-button>
                        </el-col>
                        <el-col :span="1.5">
                            <el-button @click="reset">重置</el-button>
                        </el-col>
                    </el-row>
                </el-form>
            </el-col>
        </el-row>
        <el-table v-loading="loading" :data="table" stripe style="width: 100%" ref="tableRef"
            :header-cell-style="{ background: `#f5f7fa` }">
            <el-table-column prop="name" label="群名称" />
            <el-table-column prop="createTime" label="创建时间" />
            <el-table-column prop="userCount" label="群人数" />
            <el-table-column prop="userCount" label="操作">
                <template v-slot="{ row }">
                    <el-button text type="primary" size="small">聊天</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-row justify="end" class="mt-20px">
            <el-pagination v-model:current-page="form.page" v-model:page-size="form.pageSize"
                :page-sizes="[10, 15, 20, 25]" :background="true" size="default"
                layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="geGroupList"
                @current-change="geGroupList" />
        </el-row>

    </div>
</template>

<style lang='scss' scoped></style>